<template>
  <div class="app-container">


    <el-row>
      <el-col :span="4" style="height: 30px;">
        可视列 <el-switch
          v-model="showSwitch"
          active-text="开"
          inactive-text=" 关"
        >
        </el-switch>
      </el-col>
      <el-col :span="20" v-show="showSwitch">
<div>
          <el-checkbox-group v-model="checkboxVal">
            <el-checkbox class="col_check" v-for="(v,i) in formTheadOptions" :key="i" :label="v.field">{{v.title}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </el-col>
    </el-row>
    <el-row style="width:100%;">
      <el-col :span="24">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部" name="first"></el-tab-pane>
          <el-tab-pane label="已完成" name="second"></el-tab-pane>
          <el-tab-pane label="未完成" name="third"></el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table size="mini" :data="mtb.data" v-loading.body="listLoading"  style="width: 100%"
                  tooltip-effect="dark"  @selection-change="handleSelectionChange"  highlight-current-row>
          <el-table-column type="selection" show-overflow-tooltip width="55"></el-table-column>

          <el-table-column v-for="(v,i) in mtb.columns" align="center" :key="i" :prop="v.field" :label="v.title"
                           :align="v.align" :width="v.width" >
            <template slot-scope="scope">
              <span v-if="v.field=='dhpc'" @dblclick="openDHPC(scope.row,scope.$index,true)" class="el-button el-button--text">{{scope.row[v.field]}}</span>
              <span v-else-if="v.field=='spdt'" @dblclick="openSPDT(scope.row,scope.$index,true)" class="el-button el-button--text">{{scope.row[v.field]}}</span>
              <span v-else>{{scope.row[v.field]}}</span>
            </template>
          </el-table-column>
          <!--<el-table-column fixed="right" label="操作" width="100">-->
          <el-table-column label="操作" width="150" fixed="right">
            <template slot-scope="scope">
              <button @click="handleSubmit(scope.row)" class="el-tag el-tag--primary el-tag--mini"
                      style="cursor: pointer;">提交</button>
              <button @click="handleTransform(scope.row)" class="el-tag el-tag--warning el-tag--mini"
                      style="cursor: pointer;">转办</button>
              <button @click="handleDelete(scope.row)" class="el-tag el-tag--danger el-tag--mini"
                      style="cursor: pointer;">退回</button>
            </template>

          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <el-button type="primary" @click="multipleSelectSubmit" icon="el-icon-share">批量验收</el-button>
      </el-col>

    </el-row>
<!--到货批次-->
    <el-dialog title="到货批次" :visible.sync="dialogDHPC">
      <el-table :data="gridData" fit highlight-current-row style="width: 100%;">
        <el-table-column prop="fact" label="供货单位" width="180"></el-table-column>
        <el-table-column prop="intime" label="入库时间" width="180"></el-table-column>
        <el-table-column prop="name" label="验收人" width="150"></el-table-column>
        <el-table-column prop="unit" label="计量单位" width="100"></el-table-column>
        <el-table-column prop="num" label="领用数量" width="100"></el-table-column>
        <el-table-column prop="status" label="出库状态" width="150"></el-table-column>
      </el-table>
    </el-dialog>
    <!--到货批次-->

    <el-dialog title="审批状态" :visible.sync="dialogSPDT">
      <el-table :data="gridData" fit highlight-current-row style="width: 100%;">
        <el-table-column prop="fact" label="供货单位" width="180"></el-table-column>
        <el-table-column prop="intime" label="审批时间" width="180"></el-table-column>
        <el-table-column prop="name" label="验收人" width="150"></el-table-column>
        <el-table-column prop="unit" label="计量单位" width="100"></el-table-column>
        <el-table-column prop="num" label="审批数量" width="100"></el-table-column>
        <el-table-column prop="status" label="状态" width="150"></el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
  import {disableBtn, df, $err, $suc, ERRS, SUCS, $msg} from '@/utils'
  import {fetchGet, createOne, deleteOne, deletePost, getOne, rolesAll, updateOneNoId} from '@/api/common'
  //默认显示列
  const colexp=["px", "category", "xhgg", "unit", "applyNum", "hasNum", "price", "money", "code", "dhpc", "spdt", "line", "userfor", "applyuse", "applytime", "sendman"]
  const _ = require('lodash');
  //https://www.jianshu.com/p/79f39f2c1382
  //https://www.jianshu.com/p/33175c3a6ba4
  export default {
    name: 'tablecom2',
    data: function () {
      return {
        listLoading:false,
        dialogDHPC:false,
        dialogSPDT:false,
        showSwitch:true,
        gridData: [{
          fact: '一厂',
          intime: '2016-05-02',
          name: '王小虎',
          unit: '只',
          num: '2',
          status: '正常'
        }, {
          fact: '2厂',
          intime: '2016-05-02',
          name: '王小虎2',
          unit: '只',
          num: '2',
          status: '正常'
        },{
          fact: '3厂',
          intime: '2016-05-02',
          name: '王小虎3',
          unit: '个',
          num: '2',
          status: '正常'
        },],
        count: 1,

        columns: [  //表头->字段
          {edit:false, field: "px", title: "序号", width: 50 ,align:"center" },
          {edit:false, field: "category", title: "备件名称", width: 100 ,align:"left" },
          {edit:false, field: "xhgg", title: "型号规格", width: 100 ,align:"left" },
          {edit:false, field: "unit", title: "单位", width: 50 ,align:"left" },
          {edit:true, field: "applyNum", title: "申请数量", width: 50 ,align:"left" },
          {edit:false, field: "hasNum", title: "实发数量", width: 50 ,align:"left" },
          {edit:false, field: "price", title: "单价", width: 50 ,align:"left" },
          {edit:false, field: "money", title: "金额", width: 50 ,align:"left" },
          {edit:false, field: "code", title: "备件编码", width: 80 ,align:"left" },
          {edit:false, field: "dhpc", title: "到货批次", width: 80 ,align:"left" },
          {edit:false, field: "spdt", title: "审批状态", width: 80 ,align:"left" },
          {edit:false, field: "line", title: "生产线" ,width: 100 ,align:"left" },
          {edit:false, field: "userfor", title: "用途" ,width: 100 ,align:"left" },
          {edit:false, field: "applyuse", title: "申请人" ,width: 100 ,align:"left" },
          {edit:false, field: "applytime", title: "申请时间" ,width: 100 ,align:"left" },
          {edit:false, field: "sendman", title: "发货人" ,width: 100 ,align:"left" },
          {edit:false, field: "outtime", title: "出库时间" ,width: 100 ,align:"left" },
          {edit:false, field: "type", title: "备件类别" ,width: 100 ,align:"left" },
          {edit:false, field: "type2", title: "备件类型" ,width: 100 ,align:"left" },
          {edit:false, field: "getDepart", title: "调出单位" ,width: 100 ,align:"left" },
          {edit:false, field: "getSection", title: "调入单位" ,width: 100 ,align:"left" },
        ],
        mtb: {
          data: [
            {px:1, category:1, xhgg:1, unit:1, applyNum:1, hasNum:1, price:1, money:1, code:1333, spdt:'待审',dhpc:11111, line:1, userfor:1, applyuse:1, applytime:1, sendman:1, outtime:1, type:1, type2:1, getDepart:1, getSection:1},
            {px:2, category:2, xhgg:2, unit:2, applyNum:2, hasNum:2, price:2, money:2, code:312, spdt:'待审',dhpc:22222, line:2, userfor:2, applyuse:2, applytime:2, sendman:2, outtime:1, type:1, type2:1, getDepart:1, getSection:1},
            {px:2, category:2, xhgg:2, unit:2, applyNum:2, hasNum:2, price:2, money:2, code:312, spdt:'待审',dhpc:22222, line:2, userfor:2, applyuse:2, applytime:2, sendman:2, outtime:1, type:1, type2:1, getDepart:1, getSection:1},
            {px:2, category:2, xhgg:2, unit:2, applyNum:2, hasNum:2, price:2, money:2, code:312, spdt:'待审',dhpc:22222, line:2, userfor:2, applyuse:2, applytime:2, sendman:2, outtime:1, type:1, type2:1, getDepart:1, getSection:1},
            {px:2, category:2, xhgg:2, unit:2, applyNum:2, hasNum:2, price:2, money:2, code:312, spdt:'待审',dhpc:22222, line:2, userfor:2, applyuse:2, applytime:2, sendman:2, outtime:1, type:1, type2:1, getDepart:1, getSection:1},
            {px:2, category:2, xhgg:2, unit:2, applyNum:2, hasNum:2, price:2, money:2, code:312, spdt:'待审',dhpc:22222, line:2, userfor:2, applyuse:2, applytime:2, sendman:2, outtime:1, type:1, type2:1, getDepart:1, getSection:1},
          ], //数据
          sel: null,//选中行
          columns: [],
          },
        temp: {},

        multipleSelection:[],//多选项
        key: 1,// table key
        // formTheadOptions: ['apple', 'banana', 'orange'],
        // formTheadOptions: ["px", "category", "xhgg", "unit", "applyNum", "hasNum", "price", "money", "code", "dhpc", "line", "userfor", "applyuse", "applytime", "sendman", "outtime", "type", "type2", "getDepart", "getSection" ], //选择项
        formTheadOptions:[], // formTheadval: ["px", "category", "xhgg", "unit", "applyNum", "hasNum", "price", "money", "code", "dhpc", "line", "userfor", "applyuse", "applytime", "sendman"], //选择值
        formTheadval: [], //选择值
        defaultFormThead: [], //默认选中值
        checkboxVal: [], // 当前多选选中 checkboxVal
        formThead: [], // thead关联表中当前显示的col

        activeName: 'first',

      }
    },

    watch: {
      checkboxVal(valArr) {
        this.mtb.columns = this.columns.filter((i) => {
          //默认的+选择的
          return valArr.concat(colexp).indexOf(i.field) >= 0
        })
        this.key = this.key + 1// 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
      }

    },
    mounted() {
      /*    document.oncontextmenu = function(){
            return false;
          }*/
      //取出列
      this.formTheadOptions = this.columns.filter((v) => {
        //过滤必选
        if(colexp.indexOf(v.field) == -1)
          return {field: v.field, title: v.title}
      });
      // this.formTheadOptions=[ {field:v.field,title:v.title}];
      this.defaultFormThead = this.formTheadOptions.map(v => v.field); //默认全选中值
      this.checkboxVal = this.defaultFormThead
      // this.formThead=this.columns.filter((v) => this.checkboxVal.indexOf(v.field) >= 0);

    },

    methods: {

      handleClick(tab, event) {
        console.log(this.activeName,tab.name);
      },
      //批量提交
      multipleSelectSubmit(){
        console.log(this.multipleSelection )
      },
      //勾选变动
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(val)
      },
      openDHPC(row){
        console.log('ddd');
        this.dialogDHPC = true
      },
      openSPDT(row){
        console.log('ddd');
        this.dialogSPDT = true
      },
      //删除
      handleSubmit(row) {

      },
      handleTransform(row) {

      },
      handleDelete(row) {
        this.$msgbox({
          message: '确定要删除该层级及所有子级吗? 该操作不可逆,请谨慎操作!!!',
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(action => {
          deleteOne('codeExplains', {id: row.id}).then(res => {
            if (res.data.code === 0) {
              $suc('删除成功!')
              this.$parent.getList();
            } else {
              ERRS(res.data.message)
            }
          })
        });
      },

      //详情修改
      handleUpdate(row, cancel = false) {
        console.log('ddd')
        return;

      },


    }
  }
</script>

<style scoped>
  .el-table-add-row {
    margin-top: 10px;
    width: 100%;
    height: 34px;
    border: 1px dashed #c1c1cd;
    border-radius: 3px;
    cursor: pointer;
    justify-content: center;
    display: flex;
    line-height: 34px;
  }

</style>
